<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #box {
        width: 100%;
        height: 2000px;
        background: linear-gradient(green, blue, yellow);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- $route.meta.keepAlive
           $route.meta.isLogin
          获取路由表示-->
      <ul>
        <li>
          <router-link to="/home">首页</router-link>
        </li>
        <li>
          <router-link to="/fenlei">分类</router-link>
        </li>
      </ul>
      <!-- <keep-alive>
        <component :is="componentId"></component>
      </keep-alive> -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
      // keep-alive  包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
      const Home = {
        name: 'home',
        template: `
              <div>
              {{msg}}
              <input  type="text"  />
              <kkk></kkk>
              </div>
            `,
        data() {
          return {
            msg: '我是home组件'
          }
        },
        errorCaptured(e) {
          //监听子孙组件加载错误生命周期函数
          console.log(e)
          return false //阻止错误向上传播
        },
        components: {
          kkk: {
            template: `<div>111</div>`,
            mounted() {
              // console.log(a) //子组件的错误
            }
          }
        },

        methods: {}
      }
      // 分类组件
      const Fenlei = {
        name: 'Fenlei',
        template: `<div id="box">
                    <h2>{{msg}}</h2>
                    <h1></h1>
                    <input type="text"  />
                  </div>`,
        data() {
          return {
            msg: '我是分类组件',
            fid: ''
          }
        },
        created() {
          console.log('8888888888')
        },
        mounted() {
          console.log('66666666666')
        },
        activated() {
          //被keep-alive的组件的生命周期  组件被激活
          // 被keep-alive的组件  第二次切换  creacted  mounted 不会被触发
          console.log('9999999999')
        },
        deactivated() {
          //被 keep-alive 缓存的组件停用时调用。 离开本组件
          console.log('离开组件')
        }
      }

      // 路由配置项
      var routes = [
        {
          path: '/home',
          component: Home,
          name: 'home',
          meta: {
            //标记路由状态
            // keepAlive: false
          }
        },
        {
          path: '/fenlei',
          component: Fenlei,
          name: 'fenlei',
          meta: {
            keepAlive: true, //当前组件缓存
            isLogin: true
          }
        }
      ]

      //创建路由对象
      var router = new VueRouter({
        routes
      })
      //
      var vm = new Vue({
        el: '#app',
        router,
        data() {
          return {}
        }
      })
    </script>
  </body>
</html>
